畢氏定理教學

14th鐵人賽 jsxgraph 畢氏定理 pythagoras

olddunk

2022-09-20 06:33:47

1005 瀏覽

分享至

畢氏定理是國中階段最最重要的幾何性質，也是解析幾何的根本要素。大部分的人都能熟練的應用畢氏定理，但是，除了數學老師，卻少有人能證明畢氏理。有人曾收錄了數百個畢氏定理證明，今天，我們就利用圖形轉換的方法來證明畢氏定理。

HTML架構

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide1">
      <div class="left">
        <div id="box1" class="jxgbox" style="width: 500px;height: 500px;"></div>
      </div>
      <div class="right">
        ...
      </div>
    </div>
    <div class="swiper-slide slide2">
      <div class="left">
        <div id="box2" class="jxgbox" style="width: 500px;height: 500px;"></div>
      </div>
      <div class="right">
        ...
      </div>
    </div>
    <div class="swiper-slide slide3">
      <div class="left">
        <div id="box3" class="jxgbox" style="width: 500px;height: 500px;"></div>
      </div>
      <div class="right">
        ...
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <a href="#" class="prev-btn"><i class="fa-solid fa-angles-left"></i></a>
  <a href="#" class="next-btn"><i class="fa-solid fa-angles-right"></i></a>
</div>

我們每一個跑馬燈（投影片）左邊都放置了一個JSXGraph的board在容器#box1、#box2和#box3

ES6模組（Module）

當程式愈來愈大，我們便需要將我們的程式加以組織並模組化，以方便我們管理我們的程式。Javascript自ES6支援了模組化系統，一個檔案就是一個模組，在模組中使用export（匯出）關鍵字來匯出模組中的常數或變數資料，也可以匯出函式，例如在檔案test1.js中，

export const A = 45
exprot let b = 20
export function add_b(x) {
    return x + b
}

然後在需要這些常數、變數或函式的檔案中使用import關鍵字匯入所需要的資料，例如在test2.js中

import {A, b, add_b} from 'test1.js'

如此便可以在test2.js中使用A、b和函式。

範例設計

在畢氏定理證明的範例中，每個board各自獨立成一個模組（module），並建立一個物件放置所產生的幾何元素。以board2為例，

export const board2 = JXG.JSXGraph.initBoard('box2', boardOptions)
export const board2Elements = {}
board2Elements.pointC = board2.create('point', [-9, -9], { name: '\\(C\\)', size: 0, color: 'black', label: { color: 'black' } })

以下是slide2的初始畫面

我們創建了二個看不見的滑桿s和t，其值介於0和1。並讓三角形GEB以B點為軸順時針旋轉-Math.PI * t.Value() ；三角形FGH以H點為軸逆時針旋轉Math.PI * s.Value()

接著在旋轉三角形GEB和旋轉三角形HFG加入監聽，回呼函式中我們利用兩個滑桿的moveTo方法，將滑桿移到兩端點的位置進行三角形的旋轉，下面是旋轉三角形GEB的監聽和回呼函式。

let isRotateGEB = false
const rotateGEB = document.querySelector('.rotateGEB')
rotateGEB.addEventListener('click', (e) => {
  isRotateGEB = !isRotateGEB
  if (isRotateGEB) {
    board2Elements.t.moveTo([30, 5], 1000)
  } else {
    board2Elements.t.moveTo([0, 5], 1000)
  }
})

我們可以在畫板適當的位置加入需要的文字以幫助解釋圖案的意義。

board2Elements.textASquare = board2.create('text', [0, 0, '\\(c^2\\)'], {visible: false,color: '#E9EBE9', fontSize: 24, fontUnit: 'px'})
board2Elements.textBSquare = board2.create('text', [-3, 3, '\\(b^2\\)'], {visible: false,color: '#E9EBE9', fontSize: 24, fontUnit: 'px'})
board2Elements.textCSquare = board2.create('text', [6, 6, '\\(a^2\\)'], {visible: false,color: '#E9EBE9', fontSize: 24, fontUnit: 'px'})